<template>
  <view class="container">
    <Header title="服务表单" v-model:model-value="headerHeight">
      <view class="search-box">
        <RecordSearch @confirm="handleConfirm" text="搜索填写人/表单标题"></RecordSearch>
      </view>
    </Header>
    <Paglist
      v-model="dataList"
      :is-init-api="true"
      :parame="parame"
      @register="register"
      :scroll-top-bottom="260"
    >
      <view class="list-box">
        <template v-for="(item, index) in dataList" :key="index">
          <FormRecord
            :avatar-image="item.avatar"
            :name="item.userName"
            :title="item.title"
            :date-time-str="item.updateTime"
            @click="() => handleClick(item)"
          ></FormRecord>
        </template>
      </view>
    </Paglist>
  </view>
</template>

<script lang="ts" setup>
  /* CollectRecord 收集记录 */
  import Header from '@/components/Header/index.vue';
  import FormRecord from '../FormRecord/index.vue';
  import RecordSearch from '../RecordSearch/index.vue';
  import { provide, reactive, ref } from 'vue';
  import Paglist from '@/components/Paglist/index.vue';
  import type { IFormFillRecordList, IFormFillRecordListQuery } from '@/api/serviceForm/types';
  import { useConList } from '@/components/Paglist/useConList';
  import { sysFillinRecordList } from '@/api/serviceForm';
  import { RecordTypeEnum } from '@/enums/serviceFormEnum';
  import { navigateTo } from '@/router';

  const headerHeight = ref(96);
  const parame = reactive<IFormFillRecordListQuery>({
    current: 1,
    size: 10,
    recordType: RecordTypeEnum.COLLECT,
    keyword: '',
    updateTimegt: '',
    updateTimelt: '',
  });
  const dataList = ref<IFormFillRecordList[]>([]);
  const [register, { refresh }] = useConList();
  provide('api', sysFillinRecordList);

  const handleConfirm = ({ keyWord, daterange }: { keyWord: string; daterange: Array<string> }) => {
    dataList.value = [];
    parame.keyword = keyWord;
    parame.updateTimegt = daterange[0];
    parame.updateTimelt = daterange[1];
    refresh();
  };

  const handleClick = (item: IFormFillRecordList) => {
    navigateTo({
      name: 'collectRecordDetails',
      options: {
        id: item.id,
      },
    });
  };
</script>

<style lang="scss" scoped>
  .container {
    .list-box {
      display: flex;
      padding: 32rpx;
      flex-direction: column;
      gap: 24rpx;
    }
  }
</style>
